<template>
    <div id="webGl"></div>
    <button @click="clickBtn('aaa')">显示</button>
</template>

<script setup>
import * as THREE from 'three';
// 三维场景Scene  ！！！！！！！！！！
const scene = new THREE.Scene(); // 创建3D场景对象Scene

// 物体形状：几何体Geometry  
const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建个长方体集合对象Geometry,形状

// 物体外观：材质Material
const material = new THREE.MeshBasicMaterial({ // 创建一个材质对象Material，材质
    color: 0x0000ff,
});

// 物体：网格模型Mesh
// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material)

// 模型位置.position
mesh.position.set(0, 10, 0); //设置网格模型在三维空间中的位置坐标，默认是坐标原点

// .add()方法 把网格模型mesh添加到三维场景scene中
scene.add(mesh)

// 透视投影相机PerspectiveCamera ！！！！！！！！！！！！
// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000); // 实例化一个透视投影相机对象

// 相机位置.position 
camera.position.set(200, 200, 200) //相机在Three.js三维坐标系中的位置 根据需要设置相机位置具体值

// 相机观察目标.lookAt()
camera.lookAt(0, 0, 0) // 坐标原点
camera.lookAt(mesh.position) //指向mesh对应的位置

// 渲染器Renderer ！！！！！！！！！！！！
const renderer = new THREE.WebGLRenderer(); // 创建渲染器对象

// 设置Canvas画布尺寸.setSize()
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

// 渲染器渲染方法.render() 渲染器Canvas画布属性.domElement
renderer.render(scene, camera);
setTimeout(() => {
    document.getElementById('webGl').appendChild(renderer.domElement);
}, 10);


// 按下按钮
// const clickBtn = (a) => {
//     console.log(a);
//     document.getElementById('webGl').appendChild(renderer.domElement);

// }
</script>

<style lang="scss" scoped></style>